<template>
    <div class="custom" v-loading="loading">
        <el-form :rules="rules" label-width="120px" size="mini">
            <el-row>
                <p class="custom-title">期数设置</p>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="法定调整期限">
                        <el-select v-model="extraConfig.dateType" @change="changDataType">
                            <el-option value="1" label="自然日">自然日</el-option>
                            <el-option value="2" label="交易所交易日">交易所交易日</el-option>
                            <el-option value="3" label="银行间交易日">银行间交易日</el-option>
                            <el-option value="4" label="港股交易日">港股交易日</el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-input-number
                        controls-position="right"
                        style="width:70%"
                        :min="1"
                        :max="1000"
                        size="mini"
                        @input="changInputDays()"
                        v-model="extraConfig.days"
                    ></el-input-number
                    >天
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="内部调整期限">
                        <el-select v-model="extraConfig.insideType" @change="changInsideType(extraConfig.insideType)">
                            <el-option value="1" label="固定值">固定值</el-option>
                            <el-option value="2" label="调整系数">调整系数</el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="3" v-show="extraConfig.insideType == '1'">
                    <el-select size="mini" v-model="extraConfig.insideDateType">
                        <el-option value="1" label="自然日">自然日</el-option>
                        <el-option value="2" label="交易所交易日">交易所交易日</el-option>
                        <el-option value="3" label="银行间交易日">银行间交易日</el-option>
                        <el-option value="4" label="港股交易日">港股交易日</el-option>
                    </el-select>
                </el-col>
                <el-col :span="3" v-show="extraConfig.insideType == '1'">
                    <el-input-number
                        :min="0"
                        v-model="extraConfig.insideDays"
                        :max="1000"
                        controls-position="right"
                        style="width:70%"
                        size="mini"
                    ></el-input-number
                    >天
                </el-col>
                <el-col :span="3" v-show="extraConfig.insideType == '2'">
                    <el-input-number
                        :min="0"
                        v-model="extraConfig.insideRatio"
                        :max="1000"
                        controls-position="right"
                        style="width:70%"
                        size="mini"
                        @input="changInputDays()"
                    ></el-input-number
                    >系数
                </el-col>
                <el-col :span="3" v-show="extraConfig.insideType == '2'">
                    <el-input v-model="days" disabled style="width:70%" size="mini"></el-input>天数
                </el-col>
            </el-row>
            <el-row>
                <p class="custom-title">风险分类</p>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="自定义分类">
                        <el-select v-model="extraConfig.customType">
                            <el-option v-for="itme in customTypes" :key="itme.dictKey" :value="itme.dictKey" :label="itme.dictKeyName"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <p class="custom-title">触发连续违规频率次数设置</p>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="触发频率次数">
                        <el-input-number
                            controls-position="right"
                            :min="0"
                            :max="1000"
                            v-model="extraConfig.frequency"
                            style="width:70%"
                            size="mini"
                        ></el-input-number
                        >次
                    </el-form-item>
                </el-col>
            </el-row>
            <div class="custom-but">
                <el-button @click="openCustom">取消</el-button>
                <el-button type="primary" @click="submitData">确定</el-button>
            </div>
        </el-form>
    </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import DictionConstUtil from '@/utils/diction-const-util';
import { mixins } from 'vue-class-component';
import RiskEmitter from '@/common/mixis/risk-emitter.vue';

@Component({ name: 'CustomSetting', components: {} })
export default class CustomSetting extends mixins(RiskEmitter) {
    @Prop() itemData: any;
    extraConfig: any = {
        dateType: null,
        days: undefined,
        insideType: '',
        insideDateType: null, // 系数
        insideRatio: undefined,
        insideDays: undefined,
        customType: null,
        frequency: undefined,
    };
    days: any = null; // 天数
    customTypes: any[] = [];
    loading: boolean = false;

    get urlH() {
        return '/entry';
    }

    async mounted() {
        // 自定义风险
        this.customTypes = (await DictionConstUtil.FNCustomType()) || [];
        this.getEntryCustomSetting();
    }

    changInputDays() {
        if (this.extraConfig.days === 1 && this.extraConfig.insideRatio === 0) {
            this.extraConfig.insideRatio = 0.7;
            this.days = 1;
        } else {
            if (this.extraConfig.insideRatio && this.extraConfig.days) {
                this.days = (this.extraConfig.insideRatio * this.extraConfig.days).toFixed() || 0;
            } else {
                this.days = null;
            }
        }
        // eslint-disable-next-line use-isnan
        if (this.days == NaN) {
            this.days = 0;
        }
        console.log(this.days);
    }

    // 获取数据
    getEntryCustomSetting() {
        this.$axios.get(this.urlH + '/custom/' + this.itemData.content).then((res: any) => {
            if (res) {
                this.extraConfig = res;
            }
        });
    }

    // 提交
    submitData() {
        if (!this.extraConfig.dateType && this.extraConfig.days) {
            this.yh_message_warn('法定调整期限天数已设置,法定调整期限日期类型不可为空');
            return;
        }
        if (!this.extraConfig.insideType && (this.extraConfig.insideDateType || this.extraConfig.insideDays)) {
            this.yh_message_warn('内部调整日期类型或者天数已设置,内部调整期限类型不可为空');
            return;
        }
        if (this.extraConfig.insideType === '1' && !this.extraConfig.insideDateType) {
            this.yh_message_warn('内部调整期限日期类型不可为空');
            return;
        }
        let data = {
            ...this.extraConfig,
            entryCode: this.itemData.content,
        };
        this.loading = true;
        this.$axios
            .post(this.urlH + '/update/custom', data)
            .then(res => {
                this.loading = false;
                this.yh_message_success('操作成功！');
                this.openCustom();
            })
            .catch(() => {
                // this.yh_message_warn('请求失败！');
                this.loading = false;
            });
    }

    // 监听
    changInsideType(val: any) {
        if (val == '1') {
            this.extraConfig.insideDateType = this.extraConfig.dateType;
        }
    }

    changDataType() {
        this.extraConfig.insideDateType = this.extraConfig.dateType;
    }

    // 关闭页面
    openCustom() {
        this.$emit('close-custom', this.itemData.title);
    }
}
</script>
<style lang="scss" scoped>
.custom {
    color: #222;
    padding: 10px;
    position: relative;
    height: calc(100vh - 50px);
    min-width: 900px;

    .custom-title {
        font-size: 22px;
        margin-bottom: 20px;
        margin-left: 15px;
    }

    .custom-but {
        position: absolute;
        right: 30px;
        bottom: 30px;
        // margin-top: 100px;
        // margin-left: 40px;
    }
}
/deep/ .el-form-item--mini .el-form-item__label {
    color: #222;
}
</style>
